<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function checkName() {
        var reg = /^[\da-zA-Z\u4e00-\u9f5a]{4,16}$/;
        var name = document.getElementById("myform").elements[0].value;
        if (!reg.test(name)) {
            var x = document.getElementById("name1");
            x.innerText = "error";
        } else {
            var x = document.getElementById("name1");
            x.innerText = "";
        }

    }
    function checkPwd() {
        var reg = /^[\da-zA-Z]{8,20}$/;
        var pwd = document.getElementById("myform").elements[1].value;
        if (!reg.test(pwd)) {
            var x = document.getElementById("password1");
            x.innerText = "error";
        }else {
            var x = document.getElementById("password1");
            x.innerText = "";
        }
    }

    function checkRepwd() {
        var pwd = document.getElementById("myform").elements[1].value;
        var pwd2 = document.getElementById("myform").elements[2].value;
        if (pwd !== pwd2) {
            var x = document.getElementById("repassword1");
            x.innerText = "error";
        }else {
            var x = document.getElementById("repassword1");
            x.innerText = "";
        }
    }

    function checkPhone() {
        var reg = /^1[3|5|6|8]\d{9}$/;
        var phone = document.getElementById("myform").elements[3].value;
        if (!reg.test(phone)) {
            var x = document.getElementById("phone1");
            x.innerText = "error";
        }else {
            var x = document.getElementById("phone1");
            x.innerText = "";
        }
    }
    function checkAll() {
        var reg = /^[\da-zA-Z\u4e00-\u9f5a]{4,16}$/;
        var reg2 = /^[\da-zA-Z]{8,20}$/;
        var reg3 = /^1[3|5|6|8]\d{9}$/;

        var name = document.getElementById("myform").elements[0].value;
        var pwd = document.getElementById("myform").elements[1].value;
        var pwd2 = document.getElementById("myform").elements[2].value;
        var phone = document.getElementById("myform").elements[3].value;

        if (!reg.test(name)){
            return false;
        }
        if (!reg2.test(pwd)){
            return false;
        }
        if (pwd !== pwd2){
            return false;
        }
        if (!reg3.test(phone)){
            return false;
        }
        return true;
    }

    function print() {
        var name = document.getElementById("myform2").elements[0].value;
        var text = "[";
        if (name === 0) {
            document.getElementById("number").innerText = "[]";
        } else {
            for (var i = 0; i < name; i++){
                text += i + 1 + " ";
            }
            text += "]";
            document.getElementById("number").innerText = text;
        }
    }
</script>
<body>
    <span style="font-weight: bold;">新用户注册</span><br><br>
    <form id="myform" style="text-align: center" action="https://www.baidu.com/" onsubmit="return checkAll()" method="get">
        用户名:<input type="text" name="username" onblur="checkName()"/><span id="name1" style="color: red"></span><br>
        密码:<input type="password" name="password" onblur="checkPwd()"/><span id="password1" style="color: red"></span><br>
        确认密码:<input type="password" name="repassword" onblur="checkRepwd()"/><span id="repassword1" style="color: red"></span><br>
        手机号码:<input type="text" name="phone" onblur="checkPhone()"/><span id="phone1" style="color: red"></span><br>
        <input type="submit" name="提交"><span id="all" style="color: red"></span><br>
    </form><br><br>

    <form id="myform2">
        请输入数字:<input type="text" name="number" onblur="print()"/>
        <span id="number"></span>
    </form>
</body>
</html>